<template>
    <div>
        <h3>公告管理</h3>

        <el-button icon="el-icon-plus" size="small" type="primary" @click="xinzeng"
        style="display: flex;margin-bottom: 10px">发布</el-button>



        <el-dialog title="发布消息公告" :visible.sync="dialogFormVisible" width="500px" >
            <el-form :model="form">
                <el-form-item label="公告标题" label-width="90px">
                    <el-input v-model="form.title" autocomplete="off" placeholder="请输入公告标题"></el-input>
                </el-form-item>
                <el-form-item label="公告内容" label-width="90px">
                    <el-input
                            type="textarea"
                            :rows="4"
                            placeholder="请输入公告内容"
                            v-model="form.context">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addMessage">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="消息公告详情" :visible.sync="dialogFormVisible2" width="500px" >
            <el-form :model="form">
                <el-form-item label="公告标题" label-width="90px">
                    <el-input v-model="form.title" autocomplete="off" placeholder="公告标题" disabled></el-input>
                </el-form-item>
                <el-form-item label="公告内容" label-width="90px">
                    <el-input
                            type="textarea"
                            :rows="4"
                            placeholder="公告内容"
                            v-model="form.context" disabled>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
            </div>
        </el-dialog>


        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="title"
                    label="标题"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="context"
                    label="内容"
                    width="620"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="发布时间"
                    width="200"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="primary" size="small" style="margin-right: 10px">查看详情</el-button>
                    <el-popconfirm title="确定删除该公告吗？" @confirm="handleDelete(scope.row)">
                        <el-button
                                slot="reference"
                                type="danger"
                                size="mini">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <br><br>
    </div>
</template>

<script>
export default {
    name: 'message',
    data() {
        return {
            dialogFormVisible: false,
            dialogFormVisible2: false,
            form: {
                title: '',
                context: ''
            },
            tableData: []
        }
    },
    created() {
        this.getMessageList();
    },
    methods : {
        addMessage(){
            let vm = this;
            this.axios({
                url: '/myapi/admin/sysMessage/addSysMessage',
                method: 'post',
                data:{
                    title:vm.form.title,
                    context:vm.form.context,
                    senderid:vm.$store.state.id
                }
            }).then(function (response) {
                if(response.data.success === true){
                    vm.$message({
                        message: '发布成功!',
                        type: 'success'
                    });
                    vm.getMessageList();
                    vm.dialogFormVisible = false;
                }
                else {
                    vm.$message.error('发布失败');
                    vm.getMessageList();
                    vm.dialogFormVisible = false;
                }
            });
        },
        xinzeng:function(){
            this.form.title = '';
            this.form.context = '';
            this.dialogFormVisible = true;
        },
        handleClick(row){
            this.form.title = row.title;
            this.form.context = row.context;
            this.dialogFormVisible2 = true;
        },
        handleDelete(row){
            let vm = this;
            this.axios({
                url: '/myapi/admin/sysMessage/deleteMessage/'+row.id,
                method: 'delete'
            }).then(function (response) {
                if(response.data.success === true){
                    vm.$message({
                        message: '删除成功!',
                        type: 'success'
                    });
                    vm.getMessageList();
                }
                else {
                    vm.$message.error('删除失败');
                    vm.getMessageList();
                }
            });
        },
        getMessageList(){
            let vm = this;
            this.axios({
                url: '/myapiadmin/sysMessage/listSysMessageByDesc',
                method: 'post'
            }).then(function (response) {
                if(response.data.success === true){
                    vm.tableData = response.data.content;
                }
                else {
                    vm.$message.error('获取失败');
                }
            });
        }

    }
}
</script>

<style scoped>

</style>
